<template>
  <div>
    <div class="operation-list flex">
      <div v-for="(item, index) in operationOrder" @click="navigateTo(item)" class="operation-item" :key="index">
        <nut-badge class="badge" right="10" :value="item.badge" v-if="item.badge">
          <image class="icon" :src="'/static/mine/' + item.icon + '.png'" />
          <div>{{ item.name }}</div>
        </nut-badge>
        <div flex flex-a-c flex-j-c flex-col v-else>
          <image class="icon" :src="'/static/mine/' + item.icon + '.png'" />
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="operation-item" @click="$navigateTo('/pages/mine/order/list')">
        <image class="icon" src="/static/mine/order.png" />
        <div>我的订单</div>
      </div>
    </div>

    <div class="order-message flex"
      @click="$navigateTo('/pages/goods/product/detail?skuId=' + item.orderItems[0].skuId + '&goodsId=' + item.orderItems[0].goodsId)"
      v-if="theNewList.length" v-for="(item, index) in theNewList" :key="index">
      <div v-if="item.orderItems[0]">
        <image class="goods-image" :src="item.orderItems[0].image" />
      </div>
      <div class="order-into">
        <div>{{ item.orderItems[0].name }}</div>
        <div class="tips">{{ orderStatus[item.orderStatus].value }}</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { getOrderList } from '@/api/member';
const theNewList = ref<any>([])
const orderStatus: any = {
  UNPAID: {
    title: "未付款",
    value: "商品暂未付款",
  },
  PAID: {
    title: "已付款",
    value: "买家已付款",
  },
  UNDELIVERED: {
    title: "待发货",
    value: "商品等待发货中",
  },
  DELIVERED: {
    title: "已发货",
    value: "商品已发货,请您耐心等待",
  },
  CANCELLED: {
    title: "已取消",
    value: "订单已取消",
  },
  COMPLETED: {
    title: "已完成",
    value: "订单已完成,祝您生活愉快",
  },
  STAY_PICKED_UP: {
    title: "待自提",
    value: "商品正在等待提取",
  },
  TAKE: {
    title: "待核验",
  },
}
const operationOrder = ref([
  {
    name: '待付款',
    icon: 'pay',
    key: "WAIT_PAY",
  },
  {
    name: '待收货',
    icon: 'list',
    key: "WAIT_ROG",
  },
  {
    name: '待评价',
    icon: 'evaluate',
    key: "WAIT_EVALUATE",
    badge: 0
  },
  {
    name: '退款/售后',
    icon: 'refund',
    key: "REFUND",
    badge: 0
  },
])

const navigateTo = (item: any) => {
  const navigateWay: any = {
    WAIT_PAY: "/pages/mine/order/list?tag=WAIT_PAY",
    WAIT_ROG: "/pages/mine/order/list?tag=WAIT_ROG",
    WAIT_EVALUATE: "/pages/mine/evaluation/center",
    REFUND: "/pages/mine/aftersale/list"
  }

  uni.navigateTo({
    url: navigateWay[item.key]
  })

}

onMounted(() => {

})

async function init() {
  theNewList.value = []
  const res = await getOrderList({
    pageSize: 1,
    pageNumber: 1
  })
  if (res.data.success) {
    theNewList.value = res.data.result.records
  }
}

defineExpose({
  init
})
</script>

<style scoped lang="scss">
.order-into {
  margin-left: 10rpx;
  font-size: 24rpx;
}

.tips {
  font-size: 24rpx;
  color: #999;
  letter-spacing: 2rpx;
  margin-top: 10rpx;
}

.icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 15rpx;
}

.goods-image {
  border-radius: 20rpx;
  width: 100rpx;
  height: 100rpx;
}

.order-message {
  padding: 16rpx;
  border-radius: 20rpx;
  background: #f3f5f7;
  align-items: center;
  margin-top: 20rpx;
}

.operation-list {
  >.operation-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-weight: 400;
    flex-direction: column;

  }
}

.badge {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
